<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <template>
        <el-avatar :size="220" :src="user.headImage" @error="errorHandler">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
        </el-avatar>
        <el-descriptions title="用户信息">
            <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ user.phone }}</el-descriptions-item>
            <el-descriptions-item label="联系邮箱">{{ user.email }}</el-descriptions-item>
        </el-descriptions>
        <el-button type="primary" @click="showCollectUser">收藏的用户</el-button>
        <el-dialog title="关注的用户" :visible.sync="collectUserLog">
            <div v-for="collectUser in collectUsers">
                <el-descriptions>
                    <el-descriptions-item label="用户名">{{ collectUser.username }}</el-descriptions-item>
                </el-descriptions>
                <el-row>
                    <el-button type="primary" @click="lookUser(collectUser.id)">查看用户</el-button>
                </el-row>
            </div>
        </el-dialog>
        <el-button type="primary" @click="showOurCollect">共同关注</el-button>
        <el-dialog title="共同关注" :visible.sync="ourCollectLog">
            <div v-for="collectUser in ourCollect">
                <el-descriptions>
                    <el-descriptions-item label="用户名">{{ collectUser.username }}</el-descriptions-item>
                </el-descriptions>
                <el-row>
                    <el-button type="primary" @click="lookUser(collectUser.id)">查看用户</el-button>
                </el-row>
            </div>
        </el-dialog>
        <el-button type="primary" @click="dialogUser">私信</el-button>
    </template>
</div>

<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                userId: '',
                user: {
                    id: '',
                    username: '',
                    email: '',
                    phone: '',
                    headImage: '',
                    password: ''
                },
                collectUserLog: false,
                collectUsers: [],
                ourCollectLog: false,
                ourCollect: []
            }
        },
        mounted() {
            let search = location.search;
            let urlParams = new URLSearchParams(search);
            this.user.id = JSON.parse(urlParams.get('id'));
            this.userId = JSON.parse(urlParams.get('userId'));
            this.getUser();
        },
        methods: {
            dialogUser(){
                location.href = "socket.html?myId=" + JSON.stringify(this.userId) + '&anotherId=' + JSON.stringify(this.user.id);
            },
            showOurCollect() {
                this.ourCollectLog = true;
                var _this = this;
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/collect/ourCollectUser?id=' + _this.user.id + "&userId=" + _this.userId
                }).then(function (resp) {
                    _this.ourCollect = resp.data.data[0];
                    console.log(resp.data.msg);
                });
            },
            errorHandler() {
                return true;
            },
            getUser() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/user/getUser?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.user = resp.data.data[0];
                });
            },
            showCollectUser() {
                this.collectUserLog = true;
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/collect/getCollectUsers?userId=" + _this.user.id
                }).then(function (resp) {
                    _this.collectUsers = resp.data.data[0];
                });
            },
            lookUser(userId){
                location.href = "user.html?id=" + JSON.stringify(userId)+'&userId='+JSON.stringify(this.user.id);
            }
        }
    });
</script>
</body>
</html>